<div id="modals">
    <div class="modal fade" id="modal-add" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">添加</h4>
                </div>
                <div class="modal-body">
                    <form action="javascript:;" method="post">
                        <table class="table table-striped table-bordered " width="100%">
                            <tr>
                                <th>类型编号</th>
                                <td><input type="text"class="form-control inline"  name="typeNo" value=""></td>
                            </tr>
                            <tr>
                                <th>类型名称</th>
                                <td><input type="text" class="form-control inline" name="type" value=""></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn dark green btn-save radius6"><i class="fa fa-save"></i> 添加</button>
                    <button type="button" class="btn dark btn-outline radius6" data-dismiss="modal"><i  class="fa fa-close"></i> 关闭 </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal-edit" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">修改</h4>
                </div>
                <div class="modal-body">
                    <form action="javascript:;" method="post">
                        <input type="hidden" name="id" value=""/>
                        <table class="table table-striped table-bordered " width="100%">
                            <tr>
                                <th>类型编号</th>
                                <td><input type="text"class="form-control inline"  name="typeNo" value=""></td>
                            </tr>
                            <tr>
                                <th>类型名称</th>
                                <td><input type="text"class="form-control inline"  name="type" value=""></td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn dark green btn-save radius6"><i class="fa fa-check"></i> 保存  </button>
                    <button type="button" class="btn dark btn-outline radius6" data-dismiss="modal"><i  class="fa fa-close"></i> 关闭 </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<div class="row">
    <div class="top-handle-btn">
        <form id="search-form" action="javascript:;">
            <button class='btn green radius6' data-toggle='modal' href='#modal-add' ><i class="fa fa-plus"></i> 添加</button>
            <button class="btn purple right search radius6" style="display: none" ><i class="fa fa-search"></i> 查询</button>
        </form>
    </div>
</div>
<div class="row">
    <table id="data-table" class="table table-striped table-bordered table-hover" width="100%">
        <thead>
        <tr>
            <th>类型编号</th>
            <th>类型名称</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</div>


<script type="text/javascript">
    var url ="/goods/type";
    $(function () {
        DataTable.init({
            url: url,//ajax请求url
            tableName: "data-table",//数据表table id
            paramsFormName: "search-form",//查询参数form id
            modal: "modals",//模态框div
            columns: [//列对应的字段数组，注意顺序
                {data: "typeNo"},
                {data: "type"},
            ],
            options: [//操作区域(id)
                {
                    icon:"fa fa-edit",
                    name: "编辑",
                    color: "green",
                    option: "modal-edit",
                    edit: true,
                    editMain: true,
                    url: url,
//                    visible: false,
                },
                {
                    icon:"fa fa-remove",
                    name: "删除",
                    color: "red",
                    del: url,
                },
            ],
            handles: {
                insert: [
                    {url: url, modalId: "modal-add"},
                ],
            },
        });
    });

</script>